<template>
	<view class="home">
		<!-- 搜索栏 -->
		<view class="searchBar">
			<u-icon name="plus" size="26"></u-icon>
			<u-search class="searchInput" placeholder="日照香炉生紫烟" v-model="searchValue" shape="square" :showAction="false"
				searchIconSize="26"></u-search>
			<u-icon name="bell" size="26"></u-icon>
		</view>
		<!-- banner -->
		<view class="banner">
			<u-swiper :list="list2" keyName="image" showTitle :autoplay="true" circular indicator indicatorMode="line"
				height="200" imgMode="contain"></u-swiper>
		</view>
		<!-- 功能栏 -->
		<view class="toolBox">
			<view>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in toolList" :key="listIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="40"></u-icon>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
		<!-- 学堂精选 -->
		<view class="classRecommend">
			<view class="class-title">
				<text class="text-left">学堂精选</text>
				<text class="text-right">我的课程</text>
			</view>
			<view class="class-content">
				<u-scroll-list :indicator="indicator">
					<view v-for="(item, index) in classList" :key="index" class="class-content-item">
						<image class="class-content-img" :src="item.thumb"></image>
						<text class="class-content-name">{{ item.name }}</text>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 菜单选择栏 -->
		<view class="menu">
			<u-tabs :list="menuList" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
             }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
            }" itemStyle="padding-left: 11px; padding-right: 15px; height: 34px;" @change="tabChange">
				<view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs>
		</view>
		<!-- 关注栏目内容 -->
		<view class="attention-content" v-if="currentIndex===0">
			<view v-for="(item,index) in flowList" >
				<view class="list-item" >
					<view class="item-top">
						<image class="medium" mode="widthFix" :src="item.image"></image>
						<text class="title">{{item.title}}</text>
					</view>
					<view class="item-bottom">
					    <view class="button" @tap="openApp">
							<u-image src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle" width="20"
								height="20" style="margin-right:10rpx;"></u-image>niuniu
						</view>
					    <view class="save-item">
							<u-icon name="star" size="21" bold></u-icon>
							<text class="use-count">{{item.price}}</text>
						</view>
					</view>
				</view>

			</view>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<view class="content-empty" v-else >
			<u-empty style="margin-top: 12vh;" mode="data" text="暂无内容"
				icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: 'Hello',
				searchValue: '搜索食谱/食材',
				list2: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				toolList: [{
						name: 'photo',
						title: '官方淘店'
					},
					{
						name: 'lock',
						title: '烘焙百科'
					},
					{
						name: 'star',
						title: '每日签到'
					},
					{
						name: 'hourglass',
						title: '食谱大全'
					}
				],
				indicator: false,
				classList: [{
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					name: '3款家常千层肉饼（猪肉大葱/香嫩牛肉/韭菜鸡蛋）',
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}],
				menuList: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				loadStatus: 'loadmore',
				flowList: [],
				contentList: [{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 784,
						title: '欲与天公试比高',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 7891,
						title: '须晴日，看红装素裹，分外妖娆',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					},
					{
						price: 2341,
						shop: '李白杜甫白居易旗舰店',
						title: '江山如此多娇，引无数英雄竞折腰',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 661,
						shop: '李白杜甫白居易旗舰店',
						title: '惜秦皇汉武，略输文采',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 1654,
						title: '唐宗宋祖，稍逊风骚',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 1678,
						title: '一代天骄，成吉思汗',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 924,
						title: '只识弯弓射大雕只识弯弓射大雕只识弯弓射大雕只识弯弓射大雕只识弯弓射大雕',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
					},
				],
				currentIndex:0, //定义一个索引
			}

		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			// tab栏切换
			tabChange(item) {
				console.log('index', item);
				this.currentIndex= item.index
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.contentList.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.contentList[index]))
					this.flowList.push(item);
					console.log('this.flowList', this.flowList);
				}
			},

		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="less" scoped>
	.home {
		margin: 0;
		padding: 0 40rpx;

		.searchBar {
			display: flex !important;
			justify-content: space-around !important;
			margin: 20rpx;
			align-items: center;
		}

		.searchInput {
			width: 650rpx;
			flex: unset;
			margin: 0 40rpx !important;
		}

		::v-deep .u-search__content__input {
			font-size: 30rpx !important;
			background-color: #e5e5e5;
		}
       ::v-deep .u-search__content{
		   background-color: #e5e5e5 !important;
	   }
	   ::v-deep .uni-input-input{
		   background-color: #e5e5e5 !important;
	   }
		.grid-text {
			font-size: 14px;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}

		.toolBox {
			.grid-text {
				font-size: 24rpx;
			}
		}

		.classRecommend {
			.class-title {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
                align-items: center;
				.text-left {
					font-size: 40rpx;
					font-weight: bold;
				}

				.text-right {
					font-size: 35rpx;
					color: #ccc;
				}
			}

			.class-content {
				margin-left: -22rpx;

				.class-content-item {
					margin-left: 22rpx;
					width: 325rpx;

					.class-content-img,
					.class-content-name {
						width: 325rpx;
					}

					.class-content-name {
						text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
						display: -webkit-box;
						-webkit-line-clamp: 2; // 设置两行文字溢出
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}

			}
		}

		.menu {
			padding: 20rpx 0;

			::v-deep .u-tabs__wrapper__nav__item__text {
				font-size: 30rpx !important;
			}
		}

		.attention-content {
			/*将内容分成两列展示 兼容*/
			column-count: 2;
			-moz-column-count: 2;
			-webkit-column-count: 2;
			/*规定列之间的间隔 兼容*/
			column-gap: 20px;
			-moz-column-gap: 20rpx;
			-webkit-column-gap: 20rpx;

			image {
				width: 100%;
				border-radius: 10rpx 10rpx 0 0;
			}

			.list-item {
				/*避免内容分页*/
				break-inside: avoid;
				border-radius: 10rpx;
				background: #fff;
				margin-bottom: 20rpx;

				.title {
					height: 75rpx;
					padding: 10rpx;
					text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
					display: -webkit-box;
					-webkit-line-clamp: 2; // 设置两行文字溢出
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.item-bottom {
					display: flex;
					justify-content: space-between;
					padding: 10rpx;

					.save-item,
					.button {
						display: inline-flex;
						align-items: center;
					}

				}
			}
		}
      .content-empty{
		  margin-bottom: 40rpx;
	  }
	}
</style>
